<template>
  <div>
    <ZgDialog v-model="visible" width="60%" :title="title">
      <a-card :bordered="false">
        <a-steps class="steps" :current="currentTab">
          <a-step title="参数配置" />
          <a-step title="表达式配置" />
          <a-step title="规则配置" />
        </a-steps>
        <div class="content">
          <step1 v-if="currentTab === 0" @nextStep="nextStep"/>
          <step2 v-if="currentTab === 1" @nextStep="nextStep" @prevStep="prevStep"/>
          <step2 v-if="currentTab === 2" @nextStep="nextStep" @prevStep="prevStep"/>
        </div>
      </a-card>
    </ZgDialog>
  </div>
</template>
<script>
import Step1 from './Step1'
import Step2 from './Step2'
import Step3 from './Step3'
export default {
  name: 'StepForm',
  components: {
    Step1,
    Step2,
    Step3
  },
  data () {
    return {
      visible: false,
      title: '新增',
      currentTab: 0,
      // form
      form: null
    }
  },
  methods: {
    open () {
      this.visible = true
    },

    // handler
    nextStep () {
      if (this.currentTab < 2) {
        this.currentTab += 1
      }
    },
    prevStep () {
      if (this.currentTab > 0) {
        this.currentTab -= 1
      }
    },
    finish () {
      this.currentTab = 0
    }
  }
}
</script>

<style lang="less" scoped>
  .steps {
    max-width: 750px;
    margin: 16px auto;
  }
</style>
